<template>
	<view class="main">
		<!-- <back-fixed title="切换团队"></back-fixed> -->
		<empty-team v-if="empty"></empty-team>
		<view>
			<view class="box" v-if="!empty">
				<view class="title">
					当前加入团队数量：{{teamNumber}}
				</view>
				<view v-for="v,key in list" :key="key" @click="gomyTeam(v,key)">
					<!-- <view class="card"> -->
					<view class="card" :class="{backSel:v.isSelect}">
						<view class="left">
							<view class="left_title">
								{{v.name}}
							</view>
							<view class="sub_title">
								负责人：{{v.chargePerson}}
							</view>
						</view>
						<view class="right" v-show="v.isSelect">
							<u-image :src="sed" height="44rpx" width="44rpx"></u-image>
							<!-- <u-icon name="arrow-right" size="30rpx" color="#CCCCCC"></u-icon> -->
						</view>
					</view>

				</view>
				<u-loadmore :status="status" v-if="!empty" />
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTeamByUser,
		swTeam
	} from '@/api/index.js'
	import pageMixin from '@/utils/pageMixin.js'

	export default {
		mixins: [pageMixin],
		data() {
			return {
				sed: require('@/static/img/Select_Team _Selected@2x.png'),
				show: false,
				teamName: '',
				teamNumber: 0,
				popTitle: {
					color: ' #333333',
					'font-size': '36rpx',
					'font-weight': 'bold'
				},
				status: 'loading',
			}
		},
		onLoad() {
			this.$store.commit('TEAMIDS', '') //首页进来把teamid置空，防止数据错乱
			//this.teamNumber = uni.getStorageSync('teamNumber')
		},
		watch: {
			list: {
				handler() {
					this.selected()
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			selected() {
				let res = uni.getStorageSync('myTeam')
				if (res && res?.code == 200) {
					this.list.forEach(v => {
						if (res.data.id == v.id) {
							v.isSelect = true
						}
					})
				}
			},
			async gomyTeam(obj, key) {
				this.list.forEach(v => {
					v.isSelect = false
				})
				this.list[key].isSelect = true
				let res = await swTeam(obj.id)
				//console.log(res);
				if (res.code == 200) {
					uni.setStorageSync('myTeam', res)
					// uni.redirectTo({
					// 	url: `/pages/index/index?to=1`
					// })
					uni.navigateBack({
						delta: 1
					});
				}
			},
			cancel() {
				this.teamName = ''
			},
			async getMyList(obj) {
				let res = await getTeamByUser(obj)
				// res.rows.forEach(v => {
				// 	v.check = false
				// })
				this.teamNumber = res.total
				return res
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		//position: fixed;
		//position: absolute;
		min-height: 100vh;
		//width: 100%;
		background: #F8F8F8;

		.box {
			//height: 100vh;
			background: #F8F8F8;
			//padding-top: 180rpx;
			padding-bottom: 200rpx;

			.title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #666666;
				line-height: 32rpx;
				padding: 22rpx 24rpx 0 24rpx;
			}

			.card {
				background: #FFFFFF;
				border-radius: 20rpx;
				margin: 20rpx 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				//height: 50vh;
				.left {
					display: flex;
					flex-direction: column;
					margin-left: 24px;
					padding: 20rpx 0;

					//align-items: center;
					.left_title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 32rpx;
						color: #212121;
						line-height: 38rpx;
					}

					.sub_title {
						font-family: PingFang SC, PingFang SC;
						font-weight: 500;
						font-size: 26rpx;
						color: #999999;
						margin-top: 6rpx;
						line-height: 30rpx;
					}
				}

				.right {
					margin-right: 20px;
				}
			}


		}

		.modal_pop {
			.slot-content {
				padding: 36rpx 30rpx;
			}
		}

		.sticky {
			width: 100%;
			padding: 0 24rpx;
			position: fixed;
			bottom: 0;
			padding-bottom: 80rpx;
			background-color: #FFFFFF;
			z-index: 1000;

			.my_button {
				background-color: #4DC0D9;
				font-family: PingFang SC, PingFang SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				text-align: center;
				padding: 20rpx 0;
				border-radius: 20rpx;

			}
		}
	}

	.backSel {
		background-color: #EFFFF8 !important;
	}
</style>